import useDateil from "@/hook/useDateil";
import {useNavigate} from "react-router-dom";
import {Card, Image, NavBar, Space} from "antd-mobile";

const Detail = () => {
    const {DetailList} = useDateil()
    // 返回按钮
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }

    // 数据请求回来之前 显示加载中
    if (!DetailList) {
        return <div>加载中...</div>
    }
    // 防止类型错误
    // 数据请求成功之后 渲染数据
    return (
        <div>
            <NavBar onBack={back}>{DetailList?.title}</NavBar>
            <Card title={"文章标题"}>
                <Space style={{width: "100%", overflow: "auto"}}>

                    {DetailList.cover.images.map((item) => <Image
                        key={item}
                        style={{width: "auto", height: 200}} src={item}/>)}

                </Space>
            </Card>
            <Card title={"文章内容"}>
                <div style={{fontWeight: "600"}} dangerouslySetInnerHTML={{__html: DetailList?.content}}>

                </div>
            </Card>
        </div>
    )
}

export default Detail